<template>
  <div>
    <van-nav-bar title="添加亲人" left-arrow @click-left="$router.replace('/family/admin/member')" />

    <div v-if="people.me">
      <!-- 肖像、姓名、性别 -->
      <van-grid :column-num="1">
        <van-grid-item>
          <template #icon>
            <van-image round height="100" width="100" :src="me.portrait || defaultPortrait(me.gender)"
              @click="previewImage(me.portrait || defaultPortrait(me.gender))" />
          </template>
          <template #text>
            <p class="plain-border">
              {{ me.name }}
              <sex-tag :sex="me.gender" />
            </p>
          </template>
        </van-grid-item>
      </van-grid>

      <!-- 信息概况 -->
      <van-grid direction="horizontal" :border="false" :column-num="5">
        <van-grid-item>
          <desc-tag title="世代" :content="me.generation" color="#ffc107" />
        </van-grid-item>
        <van-grid-item>
          <desc-tag title="排行" :content="me.seniority" color="#17a2b8" />
        </van-grid-item>
        <van-grid-item>
          <desc-tag title="健在" content="" color="#28a745" v-if="alive" />
          <desc-tag title="已逝" content="" color="#6c757d" v-else />
        </van-grid-item>
        <van-grid-item>
          <desc-tag title="年龄" :content="age" color="#20c997" />
        </van-grid-item>
        <van-grid-item>
          <desc-tag title="字辈" :content="me.generationName" color="#dc3545" />
        </van-grid-item>
      </van-grid>

      <!-- 家庭关系 -->
      <family-relationship @add-type="addRelatives" :relation="familyRelation" :hasHusband="!!me.gender"
        @edit-relation="openRelationEditor" @view-family-member="viewFamilyMember" :border="false" />

      <!-- 信息表单 -->
      <div v-show="showForm">
        <van-divider :style="{ color: '#1989fa', borderColor: '#1989fa' }"> {{ subTitle }}</van-divider>
        <member-form @save="handleSave" @hidden-form="showForm = false" :people="relativePeople" :anonymous="true"
          ref="memberForm" />
      </div>
    </div>

    <van-empty class="empty" v-if="emptyShow" description="空空如也~" />

    <!-- 关系编辑弹窗 -->
    <van-popup v-model="relationEdit.show" position="bottom" :close-on-click-overlay="false" :style="{ height: '60%' }">
      <div class="member-selector-popup">
        <van-nav-bar :title="选择成员" left-text="取消" @click-left="relationEdit.show = false" />

        <div class="member-list-container">
          <van-cell is-link center v-for="member in candidateList" :key="member.id"
            @click="chooseRelationTarget(member)">
            <template #title>
              <van-image round width="52" height="52" :src="member.portrait || defaultPortrait(member.gender)" />
              <p>
                <span>{{ member.name }}</span>
                <sex-tag :sex="member.gender" />
              </p>
            </template>
            <template #default>
              <van-tag color="#6c757d" v-if="member.deathDate">已逝</van-tag>
              <van-tag color="#28a745" v-else>健在</van-tag>
            </template>
          </van-cell>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
  import SexTag from '@/components/tag/sex-tag'
  import DescTag from '@/components/tag/desc-tag'
  import MemberForm from "@/components/business/member-form";
  import FamilyRelationship from "@/components/basis/family-relationship";
  import { peopleDetails } from "@/mixin/people-details";
  import { defaultPortrait } from "@/mixin/common-utils";
  import { previewImage } from "@/mixin/common-utils";

  export default {
    name: "index",
    mixins: [peopleDetails, defaultPortrait, previewImage],
    components: { SexTag, DescTag, MemberForm, FamilyRelationship },
    data() {
      return {
        subTitle: undefined,
        relativePeople: {
          id: -1,
          gender: 0,
          generation: -1,
          generationName: undefined,
          residence: undefined,
          birthplace: undefined
        },
        relativeType: -1,
        // 关系编辑
        relationEdit: {
          type: '', // 'father' | 'mother' | 'husband'
          show: false
        },
        candidateList: [],
      }
    },
    mounted() {
      this.initPeople()
    },
    computed: {
      familyRelation() {
        return {
          father: this.people.father,
          mother: this.people.mother,
          mates: this.people.mates,
          children: this.people.children,
          compatriots: this.people.compatriots
        }
      }
    },
    methods: {
      handleSave(formData) {
        this.$api.genealogy.addRelative(formData, { relativeType: this.relativeType }).then(() => {
          // 添加亲人成功，重新查询当前人员详细信息
          this.showForm = false
          this.$refs.memberForm.resetForm()
          this.initPeople()
          this.$toast.success(`${this.subTitle}成功`)

          // 更新家族仓库中的家族列表信息
          this.$store.dispatch('genealogy/updateGenealogyStore')
        }).catch(msg => {
          this.$toast({ message: msg, position: 'bottom' })
        })
      },
      addRelatives(type) {
        let { id, gender, generation, generationName, residence, birthplace } = this.people.me

        // [1]父亲 [2]母亲 [3]妻子 [4]丈夫 [5]孩子 [6]同胞
        let target = {}
        switch(type) {
          case '1':
            /*
             * 不存在生父、不存在丈夫：允许添加生父
             * 我的生父世代比我小 1
             */
            this.subTitle = '添加生父';
            gender = 0
            generation -= 1
            target = { id, gender, generation, residence, birthplace }
            this.relativeType = 1
            break;
          case '2':
            /*
             * 存在生父、不存在生母、不存在丈夫：允许添加生母
             * 我的生母世代比我小 1，丈夫 ID 为我生父 ID
             */
            this.subTitle = '添加生母';
            gender = 1
            generation -= 1
            target = { id, gender, generation, residence, birthplace }
            this.relativeType = 2
            break;
          case '3':
            /*
             * 不存在丈夫：允许添加配偶
             * 我的妻子世代、字辈与我一致，丈夫 ID 为我的 ID
             */
            this.subTitle = '添加妻子';
            gender = 1
            target = { id, gender, generation, generationName, residence, birthplace }
            this.relativeType = 3
            break;
          case '4':
            this.subTitle = '添加丈夫';
            gender = 0
            target = { id, gender, generation, generationName, residence, birthplace }
            this.relativeType = 4
            break;
          case '5':
            /*
             * 1. 存在丈夫：允许添加子女
             * 2. 不存在丈夫、仅有一个妻子：允许添加子女
             */
            if(this.people.mates.length > 1) {
              this.showForm = false
              this.$toast({ message: '检测到您存在多个配偶，请通过配偶添加子女，从而明确子女的生母关系', position: 'bottom' })
              return
            }
            this.subTitle = '添加子女';
            generation += 1;
            target = { id, generation, residence, birthplace }
            this.relativeType = 5;
            break;
          case '6':
            /*
             * 不存在丈夫、存在生父、存在生母：允许添加同胞
             * 我的同胞世代、字辈、生父、生母与我一致
             */
            this.subTitle = '添加同胞';
            target = { id, generation, generationName, residence, birthplace }
            this.relativeType = 6
            break;
          default:
            this.relativeType = -1
            this.subTitle = '添加亲人'
        }

        // 将我的部分信息赋值给我的亲人表单数据，避免重复输入
        this.$refs.memberForm.resetForm()
        this.relativePeople = { ...target }
        this.showForm = true
      },
      openRelationEditor(type) {
        this.relationEdit.type = type
        this.relationEdit.show = true
        // 加载候选成员（已存在的成员，排除自己）
        this.$api.genealogy.listMemberByName({ name: '' }).then(list => {
          // console.log(list)
          list.filter(m => m.id !== this.people.me.id)
          switch(type) {
            case '1':
              list.filter(m => m.gender === 0)
              break;
            case '2':
              list.filter(m => m.gender === 1)
              break;
            case '3':
              list.filter(m => m.gender === 1)
              break;
            case '4':
              list.filter(m => m.gender === 0)
              break;
            case '5':
              break;
            case '6':
              break;
            default:
              break;
          }
          this.candidateList = list
        }).catch(msg => this.$toast({ message: msg, position: 'bottom' }))
      },
      chooseRelationTarget(member) {
        const params = {
          peopleId: this.people.me.id,
          relativeId: member.id, 
          relativeType: this.relationEdit.type
        }

        this.$api.genealogy.updateRelative(params).then(() => {
          this.$toast.success('关系已更新')
          this.relationEdit.show = false
          this.initPeople()
          this.$store.dispatch('genealogy/updateGenealogyStore')
        }).catch(msg => this.$toast({ message: msg, position: 'bottom' }))
      }
    }
  }
</script>

<style scoped></style>
